<template>
  <c-table
    :ajax-fn="generateTableData"
    :table-columns="tableColumn"
    :table-data="tableData"
    content-wrapper=".demo-content-wrapper"
    @updateTableData="updateTableData"
  >
    <!--<template slot="expandedRowRender">
      <c-table
        :table-columns="subTableColumn"
        :table-data="tableData"
        content-wrapper=".demo-content-wrapper"
      >
        <template #job="row">
          {{ jobMap[row] }}
        </template>
      </c-table>
    </template>-->
  </c-table>
</template>

<script>
let idIndex = -1;

const jobMap = ['平天大圣', '覆海大圣', '混天大圣', '移山大圣', '通风大圣', '驱神大圣', '齐天大圣'];

export default {
  name: 'App',
  data() {
    return {
      clog: window.console.log,

      idIndex: 0,
      jobMap,

      tableColumn: [
        {
          title: 'ID',
          dataIndex: 'id',
          multiSelectFilter: [
            {
              name: 'id1',
              id: '1',
            },
            {
              name: 'id2',
              id: '2',
            },
            {
              name: 'id3',
              id: '3',
            },
          ],
          filterMultiple: false,
          align: 'center',
          scopedSlots: {
            filterDropdown: 'multiSelect',
            filterIcon: 'multiSelectIcon',
          },
        },
        {
          title: '名称',
          dataIndex: 'name',
          align: 'center',
          scopedSlots: {
            filterDropdown: 'inputFilter',
            filterIcon: 'inputFilterIcon',
          },
        },
        {
          title: '年龄',
          dataIndex: 'age',
          align: 'center',
          sorter: true,
        },
        {
          title: '职业',
          dataIndex: 'job',
          align: 'center',
          filters: [
            {
              value: '1',
              text: '111',
            },
            {
              value: '2',
              text: '222',
            },
            {
              value: '3',
              text: '333',
            },
          ],
          scopedSlots: {
            customRender: 'job',
          },
        },
      ],
      subTableColumn: [
        {
          title: 'ID',
          dataIndex: 'id',
          filters: [
            {
              text: 'id1',
              value: '1',
            },
            {
              text: 'id2',
              value: '2',
            },
            {
              text: 'id3',
              value: '3',
            },
          ],
          filterMultiple: false,
        },
        {
          title: '名称',
          dataIndex: 'name',
          scopedSlots: {
            filterDropdown: 'inputFilter',
            inputFilterIcon: 'multiSelectIcon',
          },
        },
        {
          title: '职业',
          dataIndex: 'job',
          multiSelectFilter: [
            {
              id: 1,
              name: '111',
            },
            {
              id: 2,
              name: '222',
            },
            {
              id: 3,
              name: '333',
            },
          ],
          scopedSlots: {
            filterDropdown: 'multiSelect',
            multiSelectIcon: 'multiSelectIcon',
          },
        },
      ],
      tableData: [],
    };
  },
  created() {},
  methods: {
    generateTableData() {
      //eslint-disable-next-line
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve({
            totalPage: 5,
            totalCount: 100,
            records: new Array(7).fill().map(() => ({
              id: ++idIndex,
              name: `张三丰${idIndex}`,
              age: Math.ceil(Math.random() * 100),
              job: Math.floor(Math.random() * 7),
            })),
          });
        }, 1500);
      });
    },
    updateTableData(res) {
      this.tableData = res.records;
    },
  },
};
</script>

<style lang="less" scoped></style>
